<template>
  <div class="page">
    <div class="container">
      <header>
        <span class="i-left" @click="goBack"></span>
        <div class="title">音乐列表</div>
      </header>
      <section>
        <ul>
          <!-- :key="不能写对象" -->
          <li 
          v-for="(item, i) in songs" :key="item.id" 
          :class="item.isPlay==true?'active':''"
          @click="addClick(item.id)"
          >
            
            <div class="num">{{ i + 1 }}</div>
            <div class="l">
              <div class="img-box">
                <img :src="item.artist.picUrl" alt="" />
              </div>
            </div>
            <div class="r">
              <div>{{item.name}}</div>
              <p>{{item.text }}</p>
            </div>
          </li>
        </ul>
      </section>
    </div>
    <!-- 播放器 -->
    <div>
       <my-player :id="id" :songs="songs" :type="type"></my-player>
    </div>

  </div>
</template>

<script>
// 导入组件
import MyPlayer from '../../components/MyPlayer.vue';
// 导入接口
import { recommendSongsFn, newsongFn } from "@/api/index";
// 备注: {} 对象  对象是无序的键值对数据集合.

export default {
  // 注册组件
  components: {
    MyPlayer,
  },
  //数据
  data() {
    return {
      songs: [],
      id: '',
      type: ''
    };
  },
  //方法
  methods: {
    
    // 跳转上一个页面
    goBack() {
      // 利用router实例调用api (编程式导航)
      // 方式1: 
      // this.$router.push({
      //   path: "/home",
      //   query:{}
      // });
      // 方式2
      // this.$router.back()

      // 方式3:
      this.$router.replace({path: "/home"})
    },

    // 点击列表选项
    addClick(id){
      // console.log({id})
      // 根据id切换歌曲
      this.id = id;
      // 传递id
      this.bridge.$emit('send-id', id);
      // 映射新数组
      let arr = this.songs.map(item=>{
        if(item.id == id){
            item.isPlay = true;
        }
        else {
          item.isPlay = false;
        }
        return item;
      })
      this.songs = arr;
    },

    // 获取每日推荐歌曲
    async recommendSongsFunc(id, type) {
      await recommendSongsFn().then((content) => {
        let {
          code,
          data: { dailySongs },
        } = content;
        if (code == 200) {
          let arr = dailySongs.map((item) => {
            let id = item.id;
            let title = "推荐歌曲";
            let artist = { picUrl: item.al.picUrl };
            let name = item.name;
            let text = item.al.name;
            let path = "/home/list";
            return {
              id,
              title,
              artist,
              name,
              type,
              path,
              text 
            };
          })
          // console.log(arr)
          // 控制列表对应的选项样式高亮
          // 进行赋值
          let newArr = arr.map(item=>{
                if(item.id == id){
                   item.isPlay= true;
                }
                return item;
          })
          this.songs = newArr 
        }
      });
    },

    // 获取新音乐
    async newsongFunc(id, type) {
      await newsongFn().then((content) => {
        let { code, result } = content;
        if (code == 200) {
          // console.log("10.0",result)
          let arr = result.map((item) => {
            let id = item.id;
            let title = "最新音乐";
            let artist = { picUrl: item.picUrl };
            let name = item.name;
            let text = item.song.name
            let path = "/home/list";
            return {
              id,
              title,
              artist,
              name,
              type,
              path,
              text
            };
          });
          // 控制列表对应的选项样式高亮
          // 进行赋值
          let newArr = arr.map(item=>{
                if(item.id == id){
                   item.isPlay= true;
                }
                return item;
          })
          this.songs = newArr 
        }
      });
    },
  },
  //侦听器
  watch: {
    // 观察路由的变化
    $route: {
      deep: true,
      immediate: true,
      async handler(route) {
        // console.log("1.0", route.query);
        let { id, type , played} = route.query;
        // 接收传递的id
        this.id = id;
        this.type = type;
        // console.log({ id, type })
        switch (type) {
          case "recommand":
            await this.recommendSongsFunc(id,type);
            // console.log('2.0',this.bridge);
            // console.log("xxxxx")
            if(!played) return;
            this.bridge.$emit('send-id', id);
            break;

          case "newsong":
            await this.newsongFunc(id,type);
            // console.log("yyyyy")
            if(!played) return;
            this.bridge.$emit('send-id', id);
            break;
        }
      },
    },
  },
  // 创建了程序(钩子)
  created() {
    // 观察音频的播放
    //  this.bridge.$on('send-current-time',(option)=>{
    //     console.log("->", option)
    //  })
  },
};
</script>

<style scoped lang="less">
@import "../../static/less/variable.less";
.page {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: @pad;
  .container {
    width: 100%;
    height: calc(100% - 100px);
    padding-bottom: 100px;
  }
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  header {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .i-left {
      display: block;
      width: 24px;
      height: 24px;
      background-image: url(../../static/images/i-arrow-left.png);
      background-size: cover;
    }
    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }

  section {
    width: 100%;
    overflow-y: scroll;
    height: 100%;
    ul {
      li {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
      .img-box {
        img {
          width: 60px;
          height: 60px;
        }
      }
      .r {
        width: calc(100% - 84px);
        font-size: 16px;
        padding: 0 10px;
        div {
          font-size: 17px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          font-size: 15px;
          color: #999;
          margin-top: 10px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .num {
        width: 24px;
        font-size: 17px;
      }

      .active {
        .r {
          div {
            color: @color;
          }
        }
      }
    }
  }
}
</style>